<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
    <title>Title</title>
    <script src="https://pinzafile.oss-cn-shanghai.aliyuncs.com/vue-element/loading.js"></script>
    <link rel="stylesheet" type="text/css" href="/libs/bootstrap/css/bootstrap.min.css">
    <link rel="stylesheet" type="text/css"
          href="https://pinzafile.oss-cn-shanghai.aliyuncs.com/admin/product/libs/font-awesome/css/font-awesome.min.css">
    <link rel=stylesheet href="/css/style.css" type="text/css">
    <link href="https://pinzafile.oss-cn-shanghai.aliyuncs.com/publiccss/assets/global/plugins/layui/css/layui.css"
          rel="stylesheet" type="text/css"/>
    <link href="/css/style-shop.css" rel="stylesheet" type="text/css">
    <link href="/css/shopdetail.css" rel="stylesheet" type="text/css">

</head>
<body class="body">

<div class="page-header">
    <div class="page-header-top">
        <div class="container">
            <!-- LOGO -->
            <div class="page-logo">
                <a href="/">
                    <img src="https://pinzafile.oss-cn-shanghai.aliyuncs.com/publiccss/productDesk/image/logo.png"
                         alt="logo" class="pinza-logo">
                </a>
            </div>
            <!--菜单-->
            <div class="top-menu">
                <ul class="nav pull-right">
                    <!--个人中心-->
                    <li class="dropdown dropdown-extended dropdown-dark dropdown-inbox" id="header_inbox_bar">
                        欢迎您：${userName}
                    </li>
                    <li class="dropdown dropdown-extended dropdown-dark dropdown-inbox" id="header_inbox_bar">
                        <a href="http://pinzabim.oss-cn-shanghai.aliyuncs.com/Optional/home.html"
                           target="_blank">选装体验</a>
                    </li>
                    <li class="dropdown dropdown-user dropdown-dark">
                        <a href="/index.page" target="_blank">
                            <span class="username username-hide-mobile">客户中心</span>
                        </a>
                    </li>
                    <li class="dropdown dropdown-user dropdown-dark">
                        <a href="/logout">
                            <span class="username username-hide-mobile">退出</span>
                        </a>
                    </li>
                </ul>
            </div>

            <div class="clearfix"></div>
        </div>
    </div>

</div>
<div class="main">
    <div class="container">
        <div class="row">
            <ul class="breadcrumb">
                <li><a href="/">首页</a></li>
                <li class="active">订单列表</li>
            </ul>
        </div>
        <div class="row back margin_border">
            <h3 style="padding: 15px 0">订单列表</h3>
        </div>
        <div class="row back">
            <div class="col-sm-12">
                <div class="goods-page">
                    <div class="goods-data clearfix">
                        <table summary="Shopping cart">
                            <tr>
                                <th class="goods-page-description">材料编码</th>
                                <th class="goods-page-description">材料名称</th>
                                <th class="goods-page-description">品牌</th>
                                <th class="goods-page-description">价格</th>
                                <th class="goods-page-description">数量</th>
                                <th class="goods-page-description">到货时间</th>
                                <th class="goods-page-description">单位</th>
                                <th class="goods-page-description">详情</th>
                                <th class="goods-page-description">备注</th>
                                <th class="goods-page-description">操作</th>
                            </tr>
                            <form id="submitFrom">
                                <#list list as map>
                                    <tr>
                                        <td class="goods-page-image">
                                            <a href="javascript:;">${map.sku_code}</a>
                                            <input name="sku_code" value="${map.sku_code}" type="hidden">
                                        </td>
                                        <td class="goods-page-description">
                                            <strong><span>${map.sku_name}</span></strong></td>

                                        <td class="goods-page-quantity">
                                            ${map.sku_brand}
                                        </td>
                                        <td class="goods-page-total">
                                            <strong>${map.sku_contract_price}</strong>
                                            <input name="sku_cost_price" value="${map.sku_contract_price}"
                                                   type="hidden">
                                        </td>
                                        <td class="goods-page-ref-no">
                                            <div class="layui-input-inline" style="width: 100px;">
                                                <input type="text" name="purNum" oninput="checkPrice()"
                                                       required="required" value="${map.purNum}" autocomplete="off"
                                                       class="layui-input"
                                                       onkeypress="return checkNumber(event,this);">
                                            </div>
                                        </td>
                                        <td class="goods-page-ref-no">
                                            <div class="layui-input-inline">
                                                <input type="text" name="arriveTime" class="layui-input test-item"
                                                       value="${map.arriveTime}" placeholder="yyyy-MM-dd">
                                            </div>
                                        </td>


                                        <td class="goods-page-ref-no">
                                            <strong><span>${map.sku_unit}</span></strong>
                                        </td>
                                        <td class="goods-page-description">
                                            <p><strong>规格参数：</strong> ${map.sku_slug_set}</p>
                                        </td>
                                        <td class="goods-page-description">
                                            <input type="text" autocomplete="off"
                                                   class="layui-input" name="sku_remark" value="${map.sku_remark}" />
                                        </td>
                                        <td class="del-goods-col">
                                            <button type="button" class="layui-btn layui-btn-sm layui-btn-danger"
                                                    onclick="delSku(${map.order_id},this)">删除
                                            </button>
                                        </td>
                                    </tr>
                                </#list>
                            </form>
                        </table>
                    </div>

                    <div class="shopping-total">
                        <ul>
                            <li class="shopping-total-price">
                                <span>总计</span>
                                <strong class="price"><span>¥</span><span id="sumPrice">0</span></strong>
                            </li>
                        </ul>
                    </div>
                </div>
            <#--<a href="../productDesk/index.html">-->
            <#--<button class="btn btn-default" type="submit">继续添加 <i class="fa"></i></button>-->
            <#--<a href="/order/address.page">-->
                <button class="btn btn-primary" id="submit" type="submit">提交订单 <i class="fa"></i></button>
                <a href="/shopping/index.page">
                    <button class="btn btn-primary">继续选装<i class="fa"></i></button>
                </a>
            <#--</a>-->
            <#--</a>-->
            </div>
        </div>
        <!-- END CONTENT -->
    </div>
</div>
</div>
<script src="https://pinzafile.oss-cn-shanghai.aliyuncs.com/publiccss/assets/global/plugins/jquery.min.js"
        type="text/javascript"></script>
<script src="https://pinzafile.oss-cn-shanghai.aliyuncs.com/publiccss/assets/global/plugins/layui/layui.js"
        type="text/javascript"></script>
</body>
<script>

    //限制输入数字，而且只能输入两位小数
    function checkNumber(e,txt)
    {
        var key = window.event ? e.keyCode : e.which;
        var keychar = String.fromCharCode(key);
        reg = /\d|\./;
        var result = reg.test(keychar);
        if(result)
        {
            if(e.keyCode==46)
                result=!(txt.value.split('.').length>1);
            else
                result=!(txt.value.split('.').length>1 && txt.value.split('.')[1].length>1);
        }
        if(!result)
        {
            return false;
        }
        else
        {
            return true;
        }
    }

    var layer = '';
    layui.use(['layer', 'laydate'], function () {
        layer = layui.layer
        var laydate = layui.laydate;
        //同时绑定多个
        lay('.test-item').each(function () {
            laydate.render({
                elem: this
                , trigger: 'click'
            });
        });
    });

    function delSku(val, tab) {

        layer.confirm('移除购物车?', {icon: 3, title: '提示'}, function (index) {
            //do something
            $.ajax({
                url: '/shopping/delOrderCarSkuById.json',
                type: 'post',
                data: {id: val},
                async: false,
                dataType: 'json',
                success: function (result) {
                    if (result.ret) {
                        $(tab).parent().parent().remove();
                        checkPrice();
                    } else {
                        layer.alert(result.msg);
                    }
                }
            });
            layer.close(index);
        });
    };

    function checkPrice() {
        console.log("**************")
        var nums = $("input[name='purNum']");
        var prices = $("input[name='sku_cost_price']");
        var sumPrice = 0;
        for (var i = 0; i < nums.length; i++) {
            var num = nums[i].value;
            var price = prices[i].value;
            console.log(num);
            if (num.length > 0 && price.length > 0) {
                sumPrice += num * price;
            } else {
                layer.alert("数量不能为空!");
                sumPrice = 0;
                return;
            }
        }
        $("#sumPrice").text(sumPrice.toFixed(2));
    }

    checkPrice();

    $("#submit").click(function () {
        console.log("*******1111111111*******")
        var price = $("#sumPrice").text();
        var fromData = $('#submitFrom');
        var purNum = $("input[name='purNum']");
        var boolean = false;
        for (var i = 0; i < purNum.length; i++) {
            if (purNum[i].value == '') {
                boolean = true;
            }
        }
        if (boolean) {
            layer.alert("数量不能为空");
        } else {
            $.ajax({
                url: '/shopping/updateOrderCar.json',
                type: 'POST',
                data: fromData.serialize() + "&price=" + price,
                async: false,
                dataType: 'json',
                success: function (result) {
                    if (result.ret) {
                        window.location.href = '/shopping/address.page?price=' + price;
                    } else {
                        layer.alert("数据异常！");
                    }
                }
            });
        }
    });
</script>
</html>